<template>
	<div id='tmpl'>
		<div id='mui-content' class="mui-content" style="background-color:#fff">
		    <ul class="mui-table-view mui-grid-view">
		        <li v-for='item in list' class="mui-table-view-cell mui-media mui-col-xs-6">
		        	<router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
			            <a href="#">
			                <img class="mui-media-object" :src="item.img_url">
			                <div class="mui-media-body" v-text='item.title'></div>
			            </a>
			            <div class="desc">
			            	<p>
			            		<span class='jiage'>{{item.sell_price}}</span>
			            		<s>{{item.market_price}}</s>
			            	</p>
			            	<p class='remai'>
			            		<span class='left'>热卖中</span>
			            		<span class='right'>剩余{{item.stock_quantity}}件</span>
			            	</p>
			            </div>
		        	</router-link>
		        </li>
		    </ul>    
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				list:[
				{
					'id':1,
					'title':'华为10 pro旗舰机',
					'add_time':'2015-04-19T16:51:03.000Z',
					'zhaiyao':'华为pro，该机型分为两款型号，分别为pro-',
					'click':4,
					'img_url':'http://img10.360buyimg.com/n2/s240x240_jfs/t17137/134/1253764714/149950/acf159b1/5ac1bf58Ndefaac16.jpg!q70.jpg',
					'sell_price':'￥2195',
					'market_price':'￥2499',
					'stock_quantity':60
				},
				{
					'id':2,
					'title':'华为10 pro旗舰机',
					'add_time':'2015-04-19T16:51:03.000Z',
					'zhaiyao':'华为pro，该机型分为两款型号，分别为pro-',
					'click':0,
					'img_url':'http://img10.360buyimg.com/n2/s240x240_jfs/t17137/134/1253764714/149950/acf159b1/5ac1bf58Ndefaac16.jpg!q70.jpg',
					'sell_price':2195,
					'market_price':2499,
					'stock_quantity':20
				},
				{
					'id':3,
					'title':'华为10 pro旗舰机',
					'add_time':'2015-04-19T16:51:03.000Z',
					'zhaiyao':'华为pro，该机型分为两款型号，分别为pro-',
					'click':0,
					'img_url':'http://img10.360buyimg.com/n2/s240x240_jfs/t17137/134/1253764714/149950/acf159b1/5ac1bf58Ndefaac16.jpg!q70.jpg',
					'sell_price':'￥2195',
					'market_price':'￥2499',
					'stock_quantity':20
				},
				{
					'id':4,
					'title':'华为10 pro旗舰机',
					'add_time':'2015-04-19T16:51:03.000Z',
					'zhaiyao':'华为pro，该机型分为两款型号，分别为pro-',
					'click':0,
					'img_url':'http://img10.360buyimg.com/n2/s240x240_jfs/t17137/134/1253764714/149950/acf159b1/5ac1bf58Ndefaac16.jpg!q70.jpg',
					'sell_price':'￥2195',
					'market_price':'￥2499',
					'stock_quantity':20
				},
				{
					'id':5,
					'title':'华为10 pro旗舰机',
					'add_time':'2015-04-19T16:51:03.000Z',
					'zhaiyao':'华为pro，该机型分为两款型号，分别为pro-',
					'click':0,
					'img_url':'http://img10.360buyimg.com/n2/s240x240_jfs/t17137/134/1253764714/149950/acf159b1/5ac1bf58Ndefaac16.jpg!q70.jpg',
					'sell_price':'￥2195',
					'market_price':'￥2499',
					'stock_quantity':20
				},
				{
					'id':6,
					'title':'华为10 pro旗舰机',
					'add_time':'2015-04-19T16:51:03.000Z',
					'zhaiyao':'华为pro，该机型分为两款型号，分别为pro-',
					'click':0,
					'img_url':'http://img10.360buyimg.com/n2/s240x240_jfs/t17137/134/1253764714/149950/acf159b1/5ac1bf58Ndefaac16.jpg!q70.jpg',
					'sell_price':'￥2195',
					'market_price':'￥2499',
					'stock_quantity':20
				}
				]
			}
		}
	}

</script>

<style scoped>
	#mui-content  li{
		border:1px solid rgba(0,0,0,0.2);
		box-shadow: 0 0 4px #000 color;
		margin-top:5px;
		padding-left: 0px;
		margin-left: 6px;
		margin-right: 0px;
		width: 47%;
		padding:4px;
	}
	#mui-content .desc{
		width:100%;
		height:70px;
		background:#efefef;
		padding:12px 5px 5px 5px;
		text-align: left;		

	}
	.mui-table-view.mui-grid-view{
		    padding-right: 0px;
	}
	.mui-table-view.mui-grid-view .mui-table-view-cell{
		padding-left: 0px;
	}
	.mui-table-view-cell>a:not(.mui-btn){
		padding-left: 14px;
	}
	.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{
		width:80%;
		padding-top:5%; 
	}
	.desc .jiage{
		color:red;
		font-size: 16px;
		left:10px;
		margin-right: 10px;
	}
	.remai{
		margin-top: 10px
	}
	.desc .remai .left{
		position: absolute;
		left: 20px;
	}
	.desc .remai .right{
		position: absolute;
		right: 7px;
	}
	.mui-media-body{margin-bottom: 5px;}
</style>